import React, { Component } from 'react';
import { Checkbox, Space } from 'antd-mobile'
import { connect } from 'react-redux'
import './ShopCart.scss'
import { Footer } from 'antd-mobile'
import { Dialog, Toast } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import { Empty } from 'antd-mobile'
import { create_addshop_request_action, create_subshop_request_action, create_shopclear_request_action } from '../../store/actionCreate/index'
class ShopCart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checkitem: false,
            totalPrice: 0,
            totalCount: 0,
            deleteitem: false,
        }
    }
    // 添加商品
    addgoods(payload) {
        this.props.addshop_request(payload);
        this.timeid = setTimeout(() => {
            this.changePrice()
            this.changecount()
        }, 900)
    }
    // 销毁定时器
    componentWillUnmount() {
        clearTimeout(this.timeid)
    }
    //减少商品
    subgoods(payload) {
        this.props.subshop_request(payload);
        this.timeid = setTimeout(() => {
            this.changePrice()
            this.changecount()
        }, 900)
    }
    // 选中,选中后给元素添加新的属性
    changecheck(element, event) {
        console.log('onchange出发了')
        element.checked = event
        console.log('添加新属性后', element)

        this.changePrice()
        this.changecount()
    }
    // 计算价格
    changePrice() {
        let price = 0;
        this.props.shopList.forEach(element => {
            if (element.checked) {
                price += element.salesPrice.value * element.count
            }
        });
        this.setState({ totalPrice: price })
    }
    //计算数量
    changecount() {
        let count = 0;
        this.props.shopList.forEach(element => {
            if (element.checked) {
                count += element.count
            }
        });
        this.setState({ totalCount: count })
    }
    //全选
    allchecked(e) {
        console.log('全选的状态', e)
        this.props.shopList.forEach(element => {
            element.checked = e;
        });
        this.changePrice()
        this.changecount()
    }
    //删除出现
    todelete() {
        this.setState({ deleteitem: !this.state.deleteitem })
    }
    // 连删除接口全部删除
    async alldelete() {

        const result = await Dialog.confirm({
            content: '确认删除全部商品吗？',
        })
        if (result) {
            this.props.clearshop_request();

        } else {
            Toast.show({ content: '点击了取消', position: 'bottom' })
        }
    }
    componentDidMount() {
        this.changePrice()
        this.changecount()
    }
    render() {
        return (
            <div className='shopcart_shop' >
                <div className="title_shop">
                    {
                        localStorage.getItem("token") ? (<h3>购物车({this.props.shopList.length})</h3>) :
                            <h3>购物车(0)</h3>
                    }

                    <div className="control_shop">
                        <div className="logo_shop">
                            <div className="back"></div>
                            <div className="huiyuN">cdf会员购</div>
                        </div>
                        <div className="controlbox_shop" onClick={() => { this.todelete() }}>
                            管理
                        </div>
                    </div>
                </div>

                <div className="choose_shop">
                    <div className="coose">
                        <h4>换购满Y200,享超值换购,已选0/1</h4>
                        <span style={{ color: "orange" }}>立即挑选 <RightOutline color='orange' /></span>
                    </div>
                </div>
                {/* 购物车列表 */}
                {
                    localStorage.getItem("token") ? (

                        <div className="shopcartblock_shop">
                            {
                                this.props.shopList.length == 0 ? (<Empty description='好凄凉，购物车里空空如也，快去挑选心爱的商品吧~' />) :
                                    this.props.shopList.map((element, index) => {
                                        return (
                                            <div className="shopblock_shop" key={index}>
                                                <Space direction='vertical_shop'>
                                                    <div>
                                                        <Checkbox checked={element.checked} onChange={(e) => { this.changecheck(element, e) }} />
                                                    </div>
                                                </Space>
                                                <img src={element.pic} alt="" onClick={() => { this.props.history.push({ pathname: '/detail', state: { goodid: element.id } }) }} />
                                                <div className="blocktext_shop">
                                                    <h4>{element.name}</h4>
                                                    <p className='baoyou'><span>包邮包税</span></p>
                                                    <p className='heightp_shop'> <span> 3天后恢复原价</span></p>
                                                    <div className="price_shop">
                                                        <p> ￥{element.salesPrice.value}</p>
                                                        <div className="btnbox_shop">
                                                            <button onClick={() => { this.subgoods(element) }}>-</button>
                                                            <span>{element.count}</span>
                                                            <button onClick={() => { this.addgoods(element) }}>+</button>

                                                        </div>
                                                    </div>
                                                    <span className='count_shop'>限购8件</span>
                                                </div>
                                            </div>
                                        )
                                    })
                            }
                            <Footer label='没有更多了'></Footer>
                        </div>
                    ) : <Empty description='你还没有登录,请先登录~' />}

                {/* 底部结算 */}
                <div className="total_shop">
                    <Space direction='vertical_shop'>
                        <div onClick={() => { console.log('点击了') }}>
                            <Checkbox onChange={(e) => { this.allchecked(e) }}>全选</Checkbox >
                        </div>
                    </Space>
                    <div className="tototal_shop">
                        <div className="totalprice_shop">
                            总价：<span>￥{this.state.totalPrice}</span>
                        </div>
                        {/* 判断删除键是否出现 */}
                        {
                            this.state.deleteitem ? (<button onClick={() => { this.alldelete() }} style={{ backgroundColor: "orange" }}>全部删除</button>) :
                                <button>去结算({this.state.totalCount})</button>
                        }
                    </div>

                </div>

            </div>
        )
    }
}

// export default ShopCart;
export default connect(
    (state) => {
        return {
            shopList: state.shopList
        }
    },
    (dispatch) => {
        return {
            addshop_request: function (payload) {
                dispatch(create_addshop_request_action(payload))
            },
            subshop_request: function (payload) {
                dispatch(create_subshop_request_action(payload))
            },
            clearshop_request: function (payload) {
                dispatch(create_shopclear_request_action(payload))
            }
        }
    }
)(ShopCart)